<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- layui框架 -->
<link rel="stylesheet" href="css/layui.css" media="all">
 <link rel="stylesheet" href="css/layui.mobile.css" media="all">

<link id="layuicss-layer" rel="stylesheet" href="css/modules/layer/default/layer.css" media="all">
<link id="layuicss-skincodecss" rel="stylesheet" href="css/modules/code.css" media="all">

<script type="text/javascript" src="layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script >
layui.use('layer', function(){ //独立版的layer无需执行这一句
  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
  
  //触发事件
  var active = {
    offset: function(othis){
      var type = othis.data('type')
      ,text = "请确定预约时间";
      
      layer.open({
        type: 1
        ,offset: type 
        ,id: 'layerDemo'+type //防止重复弹出
        ,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
        ,btn: '关闭全部'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
          layer.closeAll();
        }
      });
     
    }
  };

  $(' .layui-btn').on('click', function(){
	  if($.isEmptyObject($("#date").val())||$.isEmptyObject($("#time").val())){
      var othis = $(this), method = othis.data('method');
      active[method] ? active[method].call(this, othis) : '';}
  })

	 
  });


function abc(id){
    /* alert($("#"+id).html()); */   
 if($.isEmptyObject($("#date").val())||$.isEmptyObject($("#time").val())){
/* var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';  */
	// Hello();
}else{
	 $.ajax({
		 url:"/chat/addOrder",
		 type:"post",
		 data:{
			 "coachId":[[${coach.coach_id}]],
			 "venueId":[[${coach.venue_id}]],
			 "courseTime":$("#date").val()+" "+$("#time").val(),
			 "money": $("#"+id).html(),
			 "courseName":$("#"+(+id+1000)).html(),
			 "courseDuration":coursehour*60
		 }
	 
	 })
}  
}

window.coursehour =1;
</script>
<script type="text/javascript">

</script>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend style="color:#6060bb">教练:<label th:text="${user.user_name}">lisi</label><br></legend>
</fieldset>
	<!-- 获取所有课程：遍历 -->
	<table class="layui-table" >
	<thead>
	<tr><th >课程名字</th>
	<th >价格</th>
	<th>操作</th>
	</tr>

	</thead>
		<tr th:each="course:${courses}">
			<td  th:text="${course.course_name}" th:id="${course.course_id}+1000"></td>
			<td  th:text="${course.course_price}" th:id="${course.course_id}"></td>
			<td  style="padding-left: 40px;width:80px" ><button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal"  
			     th:onclick="'javascript:abc(\''+${course.course_id}+'\');'">预定</button></td>
			</tr>
	</table>
	<div class="layui-inline">
      <label class="layui-form-label">请选择日期</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="date" placeholder="预约日期" lay-key="13" style="margin-left: 10px;width:192.5px">
      </div>
    </div>
    <br><br><br>
    <div class="layui-inline">
      <label class="layui-form-label">请选择预约时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="time" placeholder="预约时间" lay-key="22">
      </div>
      <div class="layui-form-mid layui-word-aux">
      <!--   这里以控制在9:30-17:30为例 -->
      </div>
    </div>
    
    <br><br><br>
     <label class="layui-form-label">请选择课时</label>
     <br><br><br>
    <div id="slideTest4" class="demo-slider"><div class="layui-slider "><div class="layui-slider-tips" style="left: 90%; display: none;">90</div><div class="layui-slider-bar" style="background: rgb(0, 150, 136) none repeat scroll 0% 0%; width: 90%; left: 0%;"></div><div class="layui-slider-wrap" style="left: 90%;"><div class="layui-slider-wrap-btn" style="border: 2px solid #009688;"></div></div></div></div>
    <div id="LAY_democodejs">
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  
  laydate.render({
    elem: '#date'
    ,format: 'dd/MM/yyyy'
  });
 
  
  //限定可选时间
  laydate.render({
    elem: '#time'
    ,type: 'time'
    ,min: '09:00:00'
    ,max: '17:30:00'
    ,btns: ['clear', 'confirm']
  });
  
 
});
</script>

<script th:inline="javascript">
layui.use('slider', function(){
  var $ = layui.$
  ,slider = layui.slider;
  //默认滑块
  slider.render({
    elem: '#slideTest1'
    
  });
  
  
  //设置步长
  slider.render({
    elem: '#slideTest4'
    ,step: 0.5 //步长
    ,theme: '#1E9FFF' //主题色
   	 ,setTips: function(value){ //自定义提示文本
   	     return value + '小时';
   	    }
  ,input: true //输入框
  ,min: 0 //最小值
  ,max: 5 //最大值
  ,value: 1 //初始值
  ,change: function(value){
	   var hour =  value.substring(0,1);
	   coursehour = hour
	    /* $(".price").val()= $(".price").val()*hour  */
	  /*   var length = [[${courses}]].length; */
	    var courses = [[${courses}]];
	  
	    for(var i=0;i<courses.length;i++){
	    	
	    	var course = courses[i];
	    	//alert(course.course_price*hour)
	     	 $("#"+course.course_id).html(course.course_price*hour)  
	    }
	  }
  });
  
  
});
</script>
</div>
</body>
</html>